<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .all{
            width:1000px;
            border:1px solid red;
            margin:auto;
            height:500px;
            overflow: hidden;
        }
        .player{
            width:400px;
            height: 100%;
            float:left;
            border-right:1px solid red;
        }
        .center{
            width:200px;
            height: 100%;
            float:left;
        }
        .computer{
            width:398px;
            height: 100%;
            float:right;
            border-left:1px solid red;
        }
        .center h1{
            text-align: center;
        }
        .center .guess-btn{
            width:150px;
            height:150px;
            border-radius:75px;
            margin:0 auto;
            margin-top:100px;
            background: red;
            cursor: pointer;
        }
        .guess-btn h3{
            text-align: center;
            line-height: 150px;
            vertical-align: middle;
        }
        ul{
            width:200px;
            padding:0;
            list-style-type: none;
            position: relative;
        }
        .player-value{
            position: relative;;
            left:150px;

        }
        .computer img{
            margin-top:180px;
        }

    </style>
</head>
<body>
    <div class="all">
        <div class="player">
            <div>
                <label>玩家</label>
                <label id="name">张三</label>
                <label>分数</label>
                <label id="playerScore">90</label>
            </div>
            <div>
                <ul id="playerList">
                    <li ><img src="../images/stone.png" data-value="1"></li>
                    <li ><img src="../images/cloth.png" data-value="2" ></li>
                    <li ><img src="../images/clipper.png"  data-value="0"></li>
                </ul>
            </div>
        </div>
        <div class="center">
            <h1 id="result">YOU WIN</h1>
            <div class="guess-btn">
                <h3>出拳</h3>
            </div>
        </div>
        <div class="computer">
        </div>
    </div>
    <script>
        let computer = document.querySelector(".computer");
        let guessBtn = document.querySelector(".guess-btn");
        let playerList = document.getElementById("playerList");
        let result = document.getElementById("result");
        let playerScore = document.getElementById("playerScore");
        // 父类角色类
        class Role{
            // 分数
            _score = 0;
            get score(){
                return this._score;
            }
            set score(_score){
                this._score = _score;
            }
        }
        // 电脑类
        class Computer extends Role{
            // 电脑出拳
            send(){
               let value = parseInt(Math.random() * 3);
                if(value == 0){
                    computer.innerHTML = "<img src='../images/clipper.png' >";
                }else if(value == 1){
                    computer.innerHTML = "<img src='../images/stone.png' >";
                }else{
                    computer.innerHTML = "<img src='../images/cloth.png' >";
                }
               return value;
            }
        }
        // 玩家类
        class Player extends Role{
            // 玩家出拳
            send(){
                let selected = document.querySelector(".player-value");
                if(selected){
                    return selected.dataset.value;
                }
                return -1;
            }
        }

        let comp = new Computer();
        let player = new Player();
        guessBtn.onclick = function(){
            let playerValue = player.send();
            if(playerValue == -1){
                alert("请选择要出的拳");
                return;
            }
            let computerValue = comp.send();
            if(playerValue > computerValue){
                if(playerValue - computerValue == 2){
                    player.score--;
                    comp.score++;
                    result.innerHTML = "YOU LOSE";
                }else{
                    player.score++;
                    comp.score--;
                    result.innerHTML = "YOU WIN";
                }
            }else if(playerValue < computerValue){
                if(computerValue - playerValue == 2){
                    player.score++;
                    comp.score--;
                    result.innerHTML = "YOU WIN";
                }else{
                    player.score--;
                    comp.score++;
                    result.innerHTML = "YOU LOSE";
                }
            }else{
                result.innerHTML = "DRAW";
            }
            playerScore.innerHTML = player.score;

        }
        playerList.onclick = function(e){
            let selected = document.querySelector(".player-value");
            if(selected){
                selected.className = "";
            }
            e.target.className = "player-value";
            
        }

    </script>
       
</body>
</html>